<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <!-- <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>
  <script>
    // 需求1: 把数据铺设到表格里
    // 1.0 准备数据
    let arr = [
      {
        name: '牛奶',
        imgSrc: './images/01.jpg',
        price: 35, // 单价
        count: 1, // 数量
        total: 35 // 小计
      },
      {
        name: '牛奶',
        imgSrc: './images/01.jpg',
        price: 35, // 单价
        count: 1, // 数量
        total: 35 // 小计
      },
      {
        name: '牛奶',
        imgSrc: './images/01.jpg',
        price: 35, // 单价
        count: 1, // 数量
        total: 35 // 小计
      }
    ]
    // 1.1 获取tbody标签
    let tbody = document.querySelector('#carBody')
    // 1.2 遍历数组 - 每次创建tr - 添加到页面上
    function load() {
      for (let i = 0; i < arr.length; i++) {
        // 1.3 取出数组每个对象-填充标签内容中
        let obj = arr[i]
        let myTr = document.createElement('tr')
        myTr.innerHTML = `<td>
                          <input class="s_ck" type="checkbox" />
                        </td>
                        <td>
                          <img src="${obj.imgSrc}" />
                          <p>${obj.name}</p>
                        </td>
                        <td class="price">${obj.price}￥</td>
                        <td>
                          <div class="count-c clearfix">
                            <button class="reduce" ${obj.count === 1 ? 'disabled' : ''} id="${i}">-</button>
                            <input type="text" value="${obj.count}" />
                            <button class="add" id="${i}">+</button>
                          </div>
                        </td>
                        <td class="total">${obj.total}￥</td>
                        <td>
                          <a href="javascript:" class="del" id="${i}">删除</a>
                        </td>`
        tbody.appendChild(myTr)
      }

      getSum()
    }
    load() // 网页打开先铺设一遍
    

    // 累计总数量和总价的方法
    function getSum(){
      let allCount = 0;
      let allPrice = 0;
      for (let i = 0; i < arr.length; i++) {
        let obj = arr[i]
        allCount += obj.count
        allPrice += obj.total
      }
      // 标签上显示一下
      let totalCountSpan = document.querySelector('#totalCount')
      totalCountSpan.innerHTML = allCount
      let totalPriceSpan = document.querySelector('#totalPrice')
      totalPriceSpan.innerHTML = allPrice + "¥"
    }

    // 需求2: 点击+号, 完成添加数量功能
    // 表格tr和内部标签都是动态创建的, 所以把事件委托给tbody绑定
    // 2.0 tbody绑定点击事件
    tbody.addEventListener('click', function (ev) {
      if (ev.target.nodeName === "BUTTON" && ev.target.className === 'add') { // +号按钮
        // 2.1 -号按钮禁用去掉
        ev.target.previousElementSibling.previousElementSibling.disabled = false
        // 2.2 在生成标签时, 给标签添加id属性, 设置相应索引值, 点击获取
        // console.log(ev.target.id);
        // 2.3 影响数组里对象的数据
        let obj = arr[ev.target.id]
        obj.count++
        obj.total = obj.price * obj.count
        // 隐藏知识点: 对象是引用类型, 你在这修改, 会影响到原数组里对象属性的值
        // 2.4 清空页面 - 用最新数组arr - 铺设页面
        tbody.innerHTML = ''
        load()
      } else if (ev.target.nodeName === "BUTTON" && ev.target.className === 'reduce') { // -号按钮
        // 需求3: -号的功能
        // 3.0 拿到数据-修改
        let obj = arr[ev.target.id]
        obj.count--
        obj.total = obj.price * obj.count
        // 3.1 清空页面 - 重新铺设
        tbody.innerHTML = ''
        load()
      } else if (ev.target.nodeName === "A" && ev.target.className === 'del') { // 删除a标签
        // 需求4: 删除功能
        // 4.0 拿到删除a标签身上id属性保存的索引, 删除数据里的对应元素
        arr.splice(ev.target.id, 1)
        // 4.1 清空页面 - 重新铺设
        tbody.innerHTML = ''
        load()
      }
    })
  </script>

</body>

</html>